<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>时间分片</title>
  </head>
  <body>
    <div id="app"></div>

    <script>
      // 在盒子中插入十万条数据
      const total = 100000
      // 获取容器
      const Box = document.getElementById('app')
      // 学习时间切片原理
      // https://juejin.cn/post/6844903938894872589#heading-3
      // 在实际工作中，我们很少会遇到一次性需要向页面中插入大量数据的情况，
      // 但是为了丰富我们的知识体系，我们有必要了解并清楚当遇到大量数据时，
      // 如何才能在不卡主页面的情况下渲染数据，以及其中背后的原理。
      // 对于一次性插入大量数据的情况，一般有两种做法：
      // 1.时间切片  2.虚拟列表
      function violence() {
        let now = new Date().getTime()
        // 一次性渲染完 （目前的for为同步任务 微任务 首先执行）
        for (let index = 0; index < total; index++) {
          let sons = document.createElement('div')
          sons.innerHTML = index
          Box.appendChild(sons)
        }

        // for 微任务执行完后执行
        console.log('JS运行时间：', new Date().getTime() - now)
        // 宏任务 下一帧执行 也就是
        setTimeout(() => {
          console.log('渲染完毕时间===> ', new Date().getTime() - now)
        }, 0)
      }

      // violence()
      // JS运行时间： 385
      // 渲染完毕时间===>  1799
      // 在渲染过程中 我们滑动的时候，页面会有明显的卡顿
      // 这个时候我们可以总结出：页面的卡顿是由于同时渲染大量的DOM所引起的
      // 所以为了优化 我们考虑将渲染过程分批进行 每次渲染20条 直到完成最后一个
      function fiber() {
        console.log('xxxx')

        // 每次渲染20条
        let inter = 20
        // 开始页
        let start = 0
        // 参数解析：allTotal一共多少页 每一次循环-20 直到为0跳出
        //          start 从那一条开始遍历  每次遍历*20
        function loop(allTotal, start) {
          console.log('allTotal, start ==>? ', allTotal, start)
          if (allTotal <= 0) {
            return
          }
          // 一次性渲染完 （目前的for为同步任务 微任务 首先执行）
          for (let index = start; index < start + 20; index++) {
            let sons = document.createElement('div')
            sons.innerHTML = index
            Box.appendChild(sons)
          }
          // 微任务执行完毕后 开始执行宏任务
          setTimeout(() => {
            loop(allTotal - inter, start + inter)
          }, 0)
        }

        loop(total, start)
      }

      // fiber()
      // 这是我们就会发现，我们在滑动过程中，虽然程序一直在不停的渲染，但是流畅度不会闪屏，是一种很明显的时间切片处理
    </script>
  </body>
</html>
